<template>
  <div>
      <el-select
        class="ml10 w300"
        v-model="relationId"
        popper-class="cinema-group-select-pop"
        placeholder="请选择影院分组"
        clearable
        collapse-tags
        multiple
        @click.native="handleShow"
      >
        <el-option
          v-for="item in optionData"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

    <!-- 选择影院分组弹窗 -->
    <choose-relation
      v-model="showRelation"
      v-if="showRelation"
      @handle-after="relationCallBack"
      :selected-arr="selectedArr"
    ></choose-relation>
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import ChooseRelation from './components/ChooseRelation'
import cloudApis from '@/api/src/cloud'
export default {
  name: 'CinemaGroup',
  components: { ChooseRelation },
  mixins: [tableMixin],
  props: {
    value: {
      type: [String, Number],
      default: () => {}
    },
    type: {
      type: [String, Number],
      default: () => {}
    }
  },
  data () {
    return {
      showRelation: false,
      relationId: [], // 展示的名称
      optionData: [] // 数据请求回来的全部数据
    }
  },
  computed: {
    // 已选数据ID集合
    selectedArr () {
      return this.relationId
    }
  },
  watch: {
    relationId: {
      handler (val) {
        this.$emit('handle-after', this.relationId.join(','))
      },
      deep: true
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 数据回填处理
    async init () {
      let _arr = []
      if (this.type === '1' && this.value && this.value !== '-1' && this.value.length > 0) {
        _arr = this.value.split(',')
        // 请求全部影片数据，匹配对应的数据用于展示名称
        const _res = await cloudApis.getCinemaGroupList()
        const levelTwoList = _res.list.map(i => i.children).flat()
        this.optionData = levelTwoList.filter((i) => _arr.includes(i.id))
        this.relationId = _arr
      }
    },
    // 影院分组弹窗
    handleShow () {
      this.showRelation = true
    },
    // 影院分组选择回调
    async relationCallBack (val) {
      // 过滤掉一级
      const _res = await val.filter((i) => +i.level !== 1)
      this.optionData = _res
      this.relationId = _res.map((i) => i.id)
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
